<template>
    <div class="content">
        <div class="content-title">
            <div class="content-title-text">新闻资讯</div>
            <nav style="--bs-breadcrumb-divider: '>>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <router-link class="content-title-link" :to="{name: 'NewsInformation'}">首页</router-link>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        <router-link class="content-title-link" :to="{name: 'NewsInformation'}">新闻资讯</router-link>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="content-event">
            <div class="event-item" v-for="record in records" :key="record.id" @click="clickToJump(record)">
                <div class="event-item-date">
                    <div class="event-item-date-top">{{ new Date(record.createtime).getDate() }}</div>
                    <div class="event-item-date-bottom">{{ new Date(record.createtime).getFullYear() }}-{{ new Date(record.createtime).getMonth() + 1 }}</div>
                </div>
                <div class="event-item-info">
                    <div class="event-item-info-title">{{ record.title }}</div>
                    <p class="event-item-info-text">{{ record.summary }}</p>
                </div>
            </div>
            <nav aria-label="...">
                <ul class="pagination" style="float: right;">
                    <li class="page-item" @click="click_page(-2)">
                        <a class="page-link" href="#"><span aria-hidden="true">&laquo;</span></a>
                    </li>
                    <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                        <a class="page-link" href="#">{{ page.number }}</a>
                    </li>
                    <li class="page-item" @click="click_page(-1)">
                        <a class="page-link" href="#"><span aria-hidden="true">&raquo;</span></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script setup>
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import router from '@/router/index';

const store = useStore();
let records = ref([]);
let current_page = 1;
let total_records = 0;
let pages = ref([]);

const clickToJump = (record) => {
    router.push({
        name: "ContentDetail",
        params: {
            option: "events",
            id: record.id
        },
    })
}

const click_page = page => {
    if (page === -2) page = current_page - 1;
    else if (page === -1) page = current_page + 1;
    
    let max_pages = parseInt(Math.ceil(total_records / 10))
    if (page >= 1 && page <= max_pages) {
        pull_page(page);
    }
}

const update_pages = () => {
    let max_pages = parseInt(Math.ceil(total_records / 10))
    let new_pages = [];
    for (let i = current_page - 2; i <= current_page + 2; i ++) {
        if (i >= 1 && i <= max_pages) {
            new_pages.push({
                number: i,
                is_active: i === current_page ? "active" : "",
            });
        }
    }
    pages.value = new_pages;
}

const pull_page = page => {
    current_page = page;
    $.ajax({
        url: "http://localhost:3000/api/exhibit/event/get-record-info",
        type: "get",
        data: {
            page,
        },
        success(resp) {
            records.value = resp.records;
            total_records = resp.records_count;
            update_pages();
            store.commit("updateRecords", resp.records);
        },
        error(resp) {
            console.log(resp);
        }
    })
}
pull_page(current_page);

</script>

<style scoped>

.content {
    width: 100%;
    padding: 30px 0 150px 30px;
}

.content-title {
    padding: 10px 0;
    border-bottom: 1px solid rgba(232, 238, 251, 1);
    margin-bottom: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.content-title-text {
    font-size: 28px;
    color: #005aa0;
    font-weight: bold;
}

.content-title-link {
    text-decoration: none;
    color: inherit;
}

.content-text-paragraph {
    text-indent: 2em;
    margin-bottom: 30px;
}

.event-item {
    width: 100%;
    height: 180px;
    background-color: #f4f7fa;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 40px 0;
    transition: transform 0.3s ease, background-color 0.3s ease;; /* 为transform添加过渡动画 */
}
.event-item-date {
    height: 100%;
    min-width: 150px;
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    border-right: 1px solid #cccccc;
}
.event-item-date-top {
    font-size: 30px;
    color: #005aa0;
    transition: color 0.3s ease;
}
.event-item-date-bottom {
    font-size: 18px;
    color: #005aa0;
    transition: color 0.3s ease;
}
.event-item-info {
    height: 100%;
    width: 85%;
    padding: 0 50px;
}
.event-item-info-title {
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 10px;
    transition: color 0.3s ease;
    word-wrap: break-word;        /* 允许单词在需要时换行 */
    overflow: hidden;             /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    display: -webkit-box;         /* 使用 WebKit 布局来处理溢出 */
    -webkit-line-clamp: 1;        /* 限制文本行数为 3 行，超出部分显示省略号 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}
.event-item-info-text {
    color: #666666;
    transition: color 0.3s ease;
    word-wrap: break-word;        /* 允许单词在需要时换行 */
    overflow: hidden;             /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    display: -webkit-box;         /* 使用 WebKit 布局来处理溢出 */
    -webkit-line-clamp: 3;        /* 限制文本行数为 3 行，超出部分显示省略号 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}
.event-item:hover {
    cursor: pointer;
    transition: 500ms;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    background-color: #005aa0;
}
.event-item:hover .event-item-date-top,
.event-item:hover .event-item-date-bottom,
.event-item:hover .event-item-info-title,
.event-item:hover .event-item-info-text {
    color: white; /* 统一修改所有元素的字体颜色 */
}

</style>